<template>
	<view>
		<cu-custom bgColor="bg-blue-11" :isBack="true">
			<view slot="backText">
				返回
			</view>
			<view slot="content">
				空教室
			</view>
		</cu-custom>
		<view class="cu-bar bg-white solid-bottom">
			<view class="action">
				<text class="cuIcon-title text-orange"></text>选择周数
			</view>
			<view class="action">
				<button class="cu-btn bg-orange-1 shadow" @click="modalName = 'WeekModal'">第{{thisWeek}}周</button>
			</view>
		</view>
		<view class="cu-bar bg-white solid-bottom">
			<view class="action">
				<text class="cuIcon-title text-orange"></text>选择星期
			</view>
			<view class="action">
				<button class="cu-btn bg-orange-1 shadow" @click="modalName = 'DayModal'">星期{{title[thisDay]}}</button>
			</view>
		</view>
		<view class="padding flex flex-direction">
			<button class="cu-btn bg-orange-1 round shadow-blur lg" @click="getClass">查询空闲资源</button>
			<button class="cu-btn bg-orange-1 round shadow-blur lg" style="margin-top:5rpx;" @click="applyClassRoom()">申请教室</button>
		</view>
		<view class="cu-modal bottom-modal" :class="modalName=='WeekModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-blue" @click="modalName=null">单选</view>
					<view class="action text-green" @click="modalName=null">确定</view>
				</view>
				<view class="grid col-4 padding-sm bg-gray">
					<view v-for="(item,index) in 20" class="padding-xs" :key="index">
						<button class="cu-btn blue block" :class="index+1==thisWeek?'bg-blue':'line-blue'"
							@click="thisWeek=(index+1)">第{{index+1}}周
						</button>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal bottom-modal" :class="modalName=='DayModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-blue" @click="modalName=null">单选</view>
					<view class="action text-green" @click="modalName=null">确定</view>
				</view>
				<view class="grid col-4 padding-sm bg-gray">
					<view v-for="(item,index) in 7" class="padding-xs" :key="index">
						<button class="cu-btn blue block" :class="index==thisDay?'bg-blue':'line-blue'"
							@click="thisDay=(index)">星期{{title[index]}}
						</button>
					</view>
				</view>
			</view>
		</view>
		<view class="">
		  资源列表
		</view>
		<view class="animation-slide-bottom margin list-container" v-if="emptyClassList.length">
			<view class="list-head bg-blue-1">
				<view class="list-head_table_head">
					资源名称
				</view>
			</view>
			<view class="list-item text-black" v-for='(item, index) in emptyClassList' :key='index'
				:class="index%2?'bg-gray':'bg-white'">
				<view class="">
					<text class="text-bold">{{item.roomname}}</text>
				</view>
				<view class="">
					<text class="text-bold">{{item.typename}}</text>
				</view>
			</view>
		</view>
		<view v-else="emptyClassList.length">
			请点击
			 <button  class="cu-btn bg-orange-1 round shadow-blur" @click="getClass">查询</button>
		</view>
		<view class="">
			已申请列表
		</view>
		<view class="animation-slide-bottom margin list-container" v-if="applyClassRoomList.length">
			<view class="list-head bg-blue-1">
				<view class="list-head_table_head">
					资源名称
				</view>
				<view class="list-head_table_head">
					申请状态
				</view>
			</view>
			<view class="list-item text-black" v-for='(item, index) in applyClassRoomList' :key='index'
				:class="index%2?'bg-gray':'bg-white'">
				<view class="">
					<text class="text-bold">{{item.resname}}</text>
				</view>
				<view class="" v-if="item.status===1" style="color: #39B54A;">
					成功
				</view>
				<view class="" v-else-if="item.status===0" style="color: #007AFF;">
					审核中
				</view>
				<view class="" v-else style="color: red;">
					失败
				</view>
			</view>
		</view>
		<view v-else="applyClassRoomList.length">
			暂无空教室申请
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: [ '一', '二', '三', '四', '五', '六','日'],
				thisWeek: 1,
				thisDay: new Date().getDay(),
				modalName: '',
				emptyClassList: [],
				applyClassRoomList:[],
				emptyType: "search",
				emptyMsg: "点击上方按钮查询空教室。",
			};
		},
		created() {
			const value = wx.getStorageSync('start_day')
			let subWeek = parseInt(this.dateMinus(value) / 7) + 1;
			if (!(subWeek >= 1 && subWeek <= 20)) {
				subWeek = 1
			}
			this.thisWeek = subWeek
			this.getApplyClassRoomList()
		},
		methods: {
			// 获取今天距离某天相差天数
			dateMinus: function(whichDay) {
				let sdate = new Date(whichDay);
				let now = new Date();
				let days = now.getTime() - sdate.getTime();
				let day = parseInt(days / (1000 * 60 * 60 * 24));
				return day;
			},
			applyClassRoom(resourceid){
				// 获取当前空教室列表所选的 id 
				uni.navigateTo({
				    url: "/pages/home/classroom/applyClassRoom/applyClassRoom",
				    fail: res => {
				        console.log(res)
				    }
				})
			},
			getClass: function() {
				let postData = {
					weeknum:this.thisWeek,
					weekorder: this.thisDay	
				}
				console.log('postData:',postData)
				this.$reqJson("wxapi/emptyroom", "post", postData, res => {
			        console.log(res)
					if(res.content.length===0){
						uni.showToast({
								title:"无空闲资源",
								duration: 2000
						});
					}
					this.emptyClassList=res.content
				})
			},
			
			getApplyClassRoomList: function() {
				this.$reqJson("wxapi/emptyroom/applyList", "post", {}, res => {
					this.applyClassRoomList=res.content
				})
			}
		}
}
</script>

<style lang="scss">

</style>
